<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in" v-loading="loading"
         element-loading-text="加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.4)">
      <downexcel type="monthAge"></downexcel>
      <el-button size="small" plain class="mb-10" @click="getInitFn">更新数据</el-button>
      <div class="month-body" v-if="monthList.length">
        <div class="month-list" v-for="item in monthList" :key="item.id">
          <el-divider>{{ item.section_name }}</el-divider>
          <table width="100%" border="1" class="mb-10">
            <tr>
              <th>月龄</th>
              <th>数量</th>
            </tr>
            <tr v-for="(child,childIndex) in item.list" :key="`${item.id}${childIndex}`">
              <td>
                {{ child.month_name }}
              </td>
              <td>
                {{ child.number }}
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div v-else class="not-Data-line">
        未找到相应内容
      </div>
    </div>
  </div>
</template>
<script>
import {sectionMonthAge} from '@/api/admin/development'

export default {
  components: {},
  data() {
    return {
      loading: true,
      monthList: []
    }
  },
  created() {
    this.getInitFn()
  },
  methods: {
    getInitFn() {
      this.loading = true
      sectionMonthAge().then(res => {
        console.log('res', res)
        this.monthList = res.list
        setTimeout(() => {
          this.loading = false
        }, 2000)
      })
    }
  },
  mounted() {
  }
}
</script>
<style scoped>

table {
  border-collapse: collapse;
}

table th {
  height: 50px;
}

table td {
  text-align: center;
  padding: 10px;
}

.month-body {
  display: flex;
}

.month-list {
  flex: 1;
  margin-right: 20px;
}

.month-list:last-child {
  margin-right: 0;
}

.not-Data-line {
  text-align: center;
  padding: 40px;
}
</style>
